<template>
  <el-drawer v-model="drawer" :z-index="1000" size="80%" @closed="closed">
    <!-- 标题部分 -->
    <template #header>
      <h4>{{ edit ? '编辑': '新增' }}</h4>
    </template>
    <template #default>
      <el-form
        ref="form"
        :model="formParams"
        :rules="rules"
        label-width="160px"
      >
          <!-- <el-form-item label="标题(中文)" prop="titleCn">
            <el-input placeholder="标题(中文)" style="width: 320px;" v-model="formParams.titleCn"></el-input>
          </el-form-item> -->
          <el-form-item :label="$t('boat.title')" prop="titleEn">
            <el-input :placeholder="$t('boat.title')" style="width: 320px;" v-model="formParams.titleEn"></el-input>
          </el-form-item>
          
          <!-- <el-form-item label="信息内容(中文)" prop="contentCn">
            <el-input type="textarea" placeholder="信息内容(中文)" style="width: 320px;" v-model="formParams.contentCn"></el-input>
          </el-form-item> -->
          <el-form-item :label="$t('boat.content')" prop="contentEn">
            <text-editor v-model="formParams.contentEn"/>
          </el-form-item>
          
          <el-form-item :label="$t('boat.msgType')" prop="infoType">
            <el-select
              v-model="formParams.infoType"
              :placeholder="$t('operation.select')"
              size="large"
              style="width: 320px;"
              @change="change"
            >
              <el-option
                v-for="(item, idx) in infoTypes"
                :key="idx"
                :label="item"
                :value="idx + 1"
              />
            </el-select>
          </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            size="default"
            @click="save"
          >
            {{ $t('operation.save') }}
          </el-button>
          <el-button type="primary" size="default" @click="drawer = false">
            {{ $t('operation.cancel') }}
          </el-button>
        </el-form-item>
      </el-form>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { publishAdd, publishEdit } from '@/api/website/publish'
import { vesselsGetAll } from '@/api/boat/basic'
import { ElMessage } from 'element-plus'

let roles = []
let brands = ref([])
let types = ref([])
onMounted(async () => {
})

let infoTypes = ['公告', '新闻', '活动']

let statusArr = ref<any>(['正常', '冻结'])

const defaultForm = {
  id: '',
  titleCn: '',
  titleEn: '',
  contentCn: '',
  contentEn: '',
  infoType: '',
}
let formParams = reactive<any>({
  ...defaultForm,
})
const rules = {
  titleEn: [{ required: true, message: '请输入', trigger: 'blur' }],
  infoType: [{ required: true, message: '请选择', trigger: 'blur' }],
  contentEn: [{ required: true, message: '请输入', trigger: 'blur' }],
}

let drawer = ref(false)
let edit = ref(false)
const show = (row) => {
  if (row) {
    edit.value = true
    Object.keys(formParams).forEach((key) => {
      formParams[key] = row[key]
    })
  } else {
    edit.value = false
  }
  drawer.value = true
}

let loading = ref(false)
let form = ref()
//保存按钮的方法
const save = async () => {
  await form.value.validate()
  loading.value = true
  let result: any
  let param = { ...formParams }

  if (edit.value) {
    result = await publishEdit(param)
  } else {
    result = await publishAdd(param)
  }
  loading.value = false
  if (result.status == 200) {
    ElMessage({
      type: 'success',
      message: '操作成功',
    })
    drawer.value = false
    $emit('callback')
  } else {
    ElMessage({
      type: 'error',
      message: '操作失败',
    })
  }
}

const closed = () => {
  Object.assign(formParams, defaultForm)
}

//组件内部数据对外关闭的，别人不能访问
//如果想让外部访问需要通过defineExpose方法对外暴露
defineExpose({
  show,
})
//自定义事件的方法
let $emit = defineEmits(['callback'])
</script>

<style scoped>
.line {
  display: flex;
}
</style>